<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
    <!-- <div>{{test}}</div> -->
    <!-- <div v-html="flag"></div> -->
    <!-- <div v-cloak>{{test}}</div> -->
    <!-- <div v-once>{{test}}</div>
    <input type="text" v-model="test">--{{test}} -->
    <!-- <div v-if="num==1">1</div>
    <div v-else-if="num==2">2</div>
    <div v-else>3</div> -->
    <!-- <ul>
      <li v-for="(item,index) in arr" :key="index">{{item}}</li>
    </ul> -->
    <!-- <div v-bind:class="cssDiv">颜色</div> -->
    <!-- <div :class="[bo?cssDiv:'clr',cssDiv2]">颜色</div> -->
    <!-- <div>{{bo?msg:arr.join('')}}</div> -->
    <!-- <div @click="reverseStr">{{msg1}}</div> -->
    <!-- <input type="text" v-model="text2">
    <input type="text" @[iptname]="iptfun">
    <button @click="chgfun">按钮</button> -->
    <Son :abc="msg" :bbb="msg1" @sonfun="fafun"></Son>
    <span>{{fstext}}</span>
    <hr>
    <div class="aa"></div>
    <br>
    <input type="text" v-textnum="10" v-model="text"><span ref="count"></span>
    <!-- <global-register/> -->
  </div>
</template>

<script>
import Son from './components/Son'
import {Abc} from "./global"
export default {
  data(){
    return{
      num:0,
      msg:'my name is fa',
      msg1:'my1 name1 is1 fa1',
      flag:'<p>这是个P标签</p>',
      text:'',
      fstext:''
    }
  },
  directives:{
    textnum:{
      inserted:(el,binding)=>{
        let span = document.createElement('span')
        span.innerHTML=`${el.value.length}/${binding.value}`
        el.parentNode.appendChild(span)
        el.setAttribute('maxlength',binding.value)
      },
      componentUpdated(el,binding){
        el.nextElementSibling.innerHTML=`${el.value.length}/${binding.value}`
        if(el.value.length>=binding.value){
          el.style.color="red"
        }else{
          el.style.color="black"
        }
      }
    }
  },
  computed:{
  },
  components:{
    Son
  },
  mounted(){
    new Abc().$mount(".aa")
  },
  methods:{
    fafun(...a){
      this.fstext=a
      console.log(a);
      // console.log(b);
    }
  //   reverseStr(){
  //     this.msg1=this.msg1.split('').reverse().join('');
  //   },
  //   watchFun(a,b){
  //     console.log(a,b)
  //   },
  //   iptfun(){
  //     if(this.iptname=="focus"){
  //       console.log('focus')
  //     }else{
  //       console.log('blur')
  //     }
  //   },
  //   chgfun(){
  //     this.iptname='blur'
  //   }
  },
  // watch:{
  //   text2:'watchFun'
  // },
  name: 'App',
}
</script>

<style>
input{
  width: 300px;
}
[v-cloak]{
  display: none;
}
.clr{
  color: skyblue
}
.clr1{
  color: seagreen
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
